import Image from "next/image";
import React from "react";
import ButtonAtom from "../../UI_KIT/Atoms/Button.Atom";
import ButtonAtomEnum from "../../UI_KIT/Atoms/Button.Atom/enum";
import { OrderStoriesProps } from "./type";
import { IOrderStoriesPropsDefault } from "./mock";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";

const OrderStories: React.FC<OrderStoriesProps> = (props) => {
  const { amount, date, title, count, sum } = props;

  return (
    <>
      <TextAtom type={TextAtomEnum.enum_h3} className="">
        Мои заказы
      </TextAtom>
      <div className="border rounded-[10px] bg-bgGen text-textColor">
        <div className="flex justify-between p-5 bg-borderColor items-center">
          <TextAtom type={TextAtomEnum.enum_h4} className="">
            Заказ
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h4} className="font-bold">
            от Data {date}
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h4} className="font-bold">
            $Total {amount} ₽
          </TextAtom>
        </div>
        <div className="flex justify-between py-[15px] px-4">
          <div className="flex justify-between max-w-[302px]">
            <Image src="" alt="orderstorypng" width={75} height={60} />
            <h4 className="text-h4 font-regular">{title}</h4>
          </div>
          <TextAtom type={TextAtomEnum.enum_h5} className="">
            {count} шт.
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h5} className="">
            {sum}
          </TextAtom>
        </div>
        <div className="flex justify-between py-[15px] text-textColor px-4">
          <ButtonAtom type={ButtonAtomEnum.enum_butButton}>
            Удалить заказ
          </ButtonAtom>
          <TextAtom type={TextAtomEnum.enum_h5} className="">
            Способ оплаты:
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h5} className="">
            Способ доставки:
          </TextAtom>
        </div>
      </div>
    </>
  );
};

OrderStories.defaultProps = IOrderStoriesPropsDefault;
export default React.memo(OrderStories);
